<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商户管理</el-breadcrumb-item>
            <el-breadcrumb-item>商户列表(代理首页)</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-between whole-top-handle">
                <div class="search-area">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-select size="small" v-model="statusValue" class="margin-r-5" placeholder="选择商户状态" :popper-append-to-body="false">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <!-- <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="idValue" placeholder="输入要查询的id" clearable></el-input>
                    </el-col> -->
                    <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="nameValue" placeholder="要查询的商户名" clearable></el-input>
                    </el-col>
                    <!-- <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="numValue" placeholder="输入要查询的营业执照号码" clearable></el-input>
                    </el-col> -->
                    <el-button size="small" @click="getUserList(1,statusValue,nameValue)">查询</el-button>
                </div>
            </div>
            <el-row>
                <el-button size="small" type="primary" @click="addUserMer()">新增</el-button>
            </el-row>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="userList" style="width: 100%" stripe border>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="shrink-box">
                                <el-form-item label="商户ID">
                                    <span>{{ props.row.id }}</span>
                                </el-form-item>
                                <el-form-item label="商户号">
                                    <span>{{ props.row.merchant }}</span>
                                </el-form-item>
                                <el-form-item label="用户全称">
                                    <span>{{ props.row.user_name }}</span>
                                </el-form-item>
                                <el-form-item label="用户简称">
                                    <span>{{ props.row.nick_name }}</span>
                                </el-form-item>
                                <el-form-item label="商户类型">
                                    <span v-if="props.row.merchant_type==1">企业商户</span>
                                    <span v-else-if="props.row.merchant_type==2">事业单位商户</span>
                                    <span v-else-if="props.row.merchant_type==3">个体工商户</span>
                                    <span v-else-if="props.row.merchant_type==4">个人商户（小微商户）</span>
                                    <span v-else-if="props.row.merchant_type==5">自然人</span>
                                    <span v-else-if="props.row.merchant_type==6">其他组织</span>
                                    <span v-else>未知</span>
                                </el-form-item>
                                <el-form-item label="法人证件类型">
                                    <span v-if="props.row.cert_type==1">身份证</span>
                                    <span v-else>未知</span>
                                </el-form-item>
                                <el-form-item label="法人名字">
                                    <span>{{ props.row.legal_person }}</span>
                                </el-form-item>
                                <el-form-item label="法人身份证号">
                                    <span>{{ props.row.legal_person_id }}</span>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <span v-if="props.row.gender==1">男</span>
                                    <span v-else-if="props.row.gender==2">女</span>
                                    <span v-else>未知</span>
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <span>{{ props.row.email }}</span>
                                </el-form-item>
                                <el-form-item label="联系电话">
                                    <span>{{ props.row.mobile }}</span>
                                </el-form-item>
                                <el-form-item label="固定电话">
                                    <span>{{ props.row.tel }}</span>
                                </el-form-item>
                                <el-form-item label="联系地址">
                                    <span>{{ props.row.address }}</span>
                                </el-form-item>
                                <el-form-item label="联系人姓名">
                                    <span>{{ props.row.linkman }}</span>
                                </el-form-item>
                                <el-form-item label="联系人电话">
                                    <span>{{ props.row.link_phone }}</span>
                                </el-form-item>
                                <el-form-item label="结算卡联行号">
                                    <span>{{ props.row.bank_code }}</span>
                                </el-form-item>
                                <el-form-item label="开户名">
                                    <span>{{ props.row.account_name }}</span>
                                </el-form-item>
                                <el-form-item label="开户账号">
                                    <span>{{ props.row.account_no }}</span>
                                </el-form-item>
                                <el-form-item label="结算卡类型">
                                    <span v-if="props.row.settle_bank_type==1">对公</span>
                                    <span v-else-if="props.row.settle_bank_type==2">对私</span>
                                </el-form-item>
                                <el-form-item label="经营类别">
                                    <span>{{ props.row.merchant_category }}</span>
                                </el-form-item>
                                <el-form-item label="行业类型编码">
                                    <span>{{ props.row.industry_type_code }}</span>
                                </el-form-item>

                                <el-form-item label="法人身份证开始日期">
                                    <span>{{ props.row.id_card_start_date }}</span>
                                </el-form-item>
                                <el-form-item label="法人身份证开始日期">
                                    <span>{{ props.row.id_card_end_date }}</span>
                                </el-form-item>
                                <el-form-item label="组织机构代码">
                                    <span>{{ props.row.org_num }}</span>
                                </el-form-item>
                                <el-form-item label="状态">
                                    <span v-if="props.row.status==0">待审</span>
                                    <span v-else-if="props.row.status==1">成功</span>
                                    <span v-else>失败</span>
                                </el-form-item>
                                <el-form-item label="审核意见">
                                    <span>{{ props.row.org_num }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" type="selection" width="50"></el-table-column>
                    <el-table-column align="center" prop="id" label="UID" width="60"></el-table-column>
                    <el-table-column align="center" prop="merchant" label="商户号"></el-table-column>
                    <el-table-column align="center" prop="mobile" label="联系电话"></el-table-column>
                    <el-table-column align="center" prop="bank_code" label="结算卡联行号"></el-table-column>
                    <el-table-column align="center" prop="account_name" label="开户名"></el-table-column>
                    <el-table-column align="center" prop="status" label="状态" width="70">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status==0" type="info" size="mini">待审</el-tag>
                            <el-tag v-else-if="scope.row.status==1" type="success" size="mini">成功</el-tag>
                            <el-tag v-else type="danger" size="mini">失败</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="opinion" label="审核意见"></el-table-column>
                    <el-table-column align="center" label="操作" width="300">
                        <template slot-scope="scope">
													  <el-button size="mini"  v-if="scope.row.status==1" @click="openIntoTypedialog(scope.row.id)">进件</el-button>
                            <el-button size="mini" @click="showInfoDialog(scope.row.id)">渠道信息</el-button>
                            <el-button size="mini" @click="editorMerchants(scope.row)">编辑</el-button>
                            <el-button size="mini" @click="delMerchants(scope.row)">删除</el-button>  
														<el-button size="mini" @click="openqr(scope.row.merchant)">查看付款码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="whole-pagination">
                    <el-pagination :page-size="size" background layout="prev, pager, next" :total="count" @current-change="currentPage"></el-pagination>
                </div>
                <el-dialog title="渠道信息" :visible.sync="infoDialogVisible" width="900px" :before-close="handleClose">
                    <div>
                        <el-table :data="channelInfoList" style="width:100%">
                            <el-table-column prop="mch_id" label="商户号"></el-table-column>
                            <el-table-column prop="service_rate" label="费率"></el-table-column>
                            <el-table-column prop="statusText" label="状态"></el-table-column>
                            <el-table-column prop="create_time" label="添加时间"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.status==0" type="success" size="mini" plain @click="setChannelStatus(scope.row.type,1)">开启</el-button>
                                    <el-button v-else size="mini" type="danger" plain @click="setChannelStatus(scope.row.type,0)">关闭</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="infoDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="infoDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
                <el-dialog title="进件渠道" :visible.sync="intoTypeVisible" width="30%" center>
                    <div>
                        <el-radio-group v-model="intoType">
                            <el-radio :label="1">合利宝</el-radio>
                            <el-radio :label="2">富有</el-radio>
                            <el-radio :label="3">联动优势</el-radio>
														<el-radio :label="4">瑞银信</el-radio>
                        </el-radio-group>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="intoTypeVisible = false">取 消</el-button>
                        <el-button type="primary" @click="setInto">确 定</el-button>
                    </span>
                </el-dialog>
								<el-dialog title="支付二维码" width="500px" :center=true :visible.sync="showqr">
									<QrShow :merchantID="merchantID"></QrShow>
								</el-dialog>
            </div>
        </el-card>
    </div>
</template>
<script>
	import QrShow from '../../../pubcom/qr';
	export default {
		components:{
			QrShow
		},
		data() {
			return {
				userList: [],
				count: 0,
				size: 10,
				page: 1,
				infoDialogVisible: false,
				showqr: false,
				channelInfoList: [],
				statusOptions: [{
						value: 0,
						label: "待审",
					},
					{
						value: 1,
						label: "成功",
					},
					{
						value: 2,
						label: "失败",
					},
				],
				statusValue: "",
				idValue: "",
				nameValue: "",
				numValue: "",
				// 进件渠道
				intoTypeVisible: false,
				// 进件类型
				intoType: '',
				selectId: 0,
				agentID: this.$store.state.userId,
				merchantID:''
			};
		},
		created() {
			this.getUserList(1);
		},
		methods: {
			// 打开进件渠道选择
			openIntoTypedialog(id) {
				this.selectId = id;
				this.intoTypeVisible = true;
			},
			// 打开支付二维码
			openqr(id) {
			    this.merchantID = id;
			    this.showqr = true;
			},
			clearFilter() {
				this.$refs.myTable.clearFilter();
				this.statusValue = "";
				// this.idValue = "";
				this.nameValue = "";
				// this.numValue = "";
				this.getUserList(1);
			},
			renderHeader(h, {
				column
			}) {
				var lab = column.label.split("/");
				var con = [];
				for (let i = 0; i < lab.length; i++) {
					con.push(h("p", {}, lab[i]));
				}
				return h("p", {}, con);
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
			showInfoDialog(id) {
				this.selectId = id;
				this.infoDialogVisible = true;
				this.getChannelInfo();
			},
			getChannelInfo() {
				let _this = this;
				this.$axios({
					url: "/admin/general/getUserChannel",
					data: {
						userID: _this.selectId
					},
					success(res) {
						if (res.data.code == 200) {
							_this.channelInfoList = res.data.content;
						}
					},
				});
			},
			setChannelStatus(type, status) {
				let _this = this;
				this.$axios({
					url: "/admin/general/setUserChannelStatus",
					data: {
						userID: _this.selectId,
						type: type,
						status: status
					},
					success(res) {
						if (res.data.code == 200) {
							_this.$message({
								message: res.data.msg,
								type: 'success'
							});
							_this.getChannelInfo();
						} else {
							_this.$message.error(res.data.msg);
						}
					},
				});
			},
			setInto() {
				if (this.intoType == '') {
					this.$message.error("请选择接通渠道")
					return
				}
				switch (this.intoType) {
					case 1:
						this.$router.push({
							path: "/merchants/child-hl",
							query: {
								id: this.selectId
							}
						});
						break;
					case 2:
						console.log("未开通呢 不要急")
						break;
					case 3:
						this.$router.push({
							path: "/merchants/child-ld",
							query: {
								id: this.selectId
							}
						});
						break;
				}

			},
			// 获取商户列表
			getUserList(page, status, name) {
				let _this = this;
				this.$axios({
					url: "/admin/general/userList",
					data: {
						status: status !== undefined ? status : '',
						name: name !== undefined ? name : '',
						offset: page,
						limit: _this.size,
						agentID: _this.agentID,
					},
					success(res) {
						if (res.data.code == 200) {
							_this.userList = res.data.content.user;
							_this.count = Number(res.data.content.count);
						}
					},
				});
			},
			// 新增
			addUserMer() {
				this.$router.push({
					path: "/merchants/add-merch",
					query: {
						type: 0,
						identity: 'user'
					}
				});
			},
			// 跳转编辑商户
			editorMerchants(row) {
				this.$router.push({
					path: "/merchants/add-merch",
					query: {
						type: 1,
						identity: 'user',
						form: row
					}
				});
			},
			currentPage(page) {
				let _this = this;
				let sta;
				// if (_this.statusValue == undefined) {
				//     sta = 0;
				// } else {
				//     sta = _this.orderExcelStatus;
				// }
				_this.getUserList(page, _this.statusValue, _this.nameValue);
			},
		},
	};
</script>
<style scoped>
	.shrink-box {
		width: 100%;
		font-size: 0;
	}

	.shrink-box>>>label {
		width: 140px;
		color: #99a9bf;
	}

	.shrink-box .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 33.333333%;
	}

	.a {
		vertical-align: middle;
	}
</style>
